<template>
    <div>
        app-{{ myname }}
        <button @click="handleClick">click</button>
        <div ref="mydiv"></div>
        <input type="text" ref="myinput">
        <Child style="background: yellow;" title="首页" :item="{
            name: 'seupyy',
            age: 100,
            list: [1, 2, 3]
        }" @event="toChildEvent"></Child>
    </div>
</template>

<script lang="ts">
import Child from './Child.vue';

interface InterState {
    myname: string,
    myage: number,
    list: Array<string>
}
export default {
    components: {
        Child
    },
    data() {
        return ({
            myname: "kerwin",
            myage: 100,
            list: []
        }) as InterState
    },

    methods: {
        handleClick() {
            // this.myname = 100;
            // this.myage = "aaa"
            console.log((this.$refs.mydiv as HTMLDivElement).innerHTML);
            console.log((this.$refs.mydiv as HTMLInputElement).value);

        },
        toChildEvent(data: string) {
            console.log("收到子组件的消息", data);
        }
    }
}

</script>